<script setup>
	import { getMemberOrderAPI, getPayMockAPI, getPayWxPayMiniPayAPI } from '@/utils/apis.js'
	import { onMounted, ref } from 'vue';
	
	// 获取组件参数   两个页面过来，就两个参数
	let props = defineProps({
		orderState: {
			type: Number
		}
	})
	
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	let orderStateList = ref([
		{id: 0, text: ''},
		{id: 1, text: '待付款'},
		{id: 2, text: '待发货'},
		{id: 3, text: '待收货'},
		{id: 4, text: '待评价'},
		{id: 5, text: '已完成'},
		{id: 6, text: '已取消'}
	])
	
	// 请求参数
	let data = {
		page: 1,
		pageSize: 5,
		orderState: props.orderState
	}
	let isLoding = ref(false)
	let pages = ref(0)
	let orderList = ref([])
	// 获取订单列表
	isLoding.value = true
	let getMemberOrderData = async() => {
		let res = await getMemberOrderAPI(data)
		isLoding.value = false
		// orderList.value = res.result.items
		orderList.value = [...orderList.value, ...res.result.items]
		pages.value = res.result.pages
	}
	
	// 组件里面使用这个生命周期
	onMounted(() => {
		getMemberOrderData()
	})
	
	
	// 点击去支付
	let onOrderPay = async (id) => {
		// 开发环境：模拟支付，修改订单状态为已支付
		await getPayMockAPI({ orderId: id })
		
		// 生产环境：获取支付参数 + 发起微信支付
		// const res = await getPayWxPayMiniPayAPI({ orderId: id })
		// await wx.requestPayment(res.result)
		
		uni.showToast({
			icon: "success",
			title: '支付成功'
		})
		let order = orderList.value.find(v => v.id == id )
		// 修改为待发货
		order.orderState = 2
	}
	
	
	// 页面滚动触底事件
	let onScrolltolower = () => {
		// 节流,如果正在请求,不发起额外请求了
		if(isLoding.value) return;
		if( data.page >= pages.value ){
			return uni.$showMsg('没有更多数据啦')
		}else{
			data.page++
			getMemberOrderData()
		}
		
	}
	
	
</script>

<template>
	<scroll-view scroll-y class="orders" @scrolltolower="onScrolltolower">
		<view class="card" v-for="order in orderList" :key="order.id">
			<!-- 订单信息 -->
			<view class="status">
				<text class="date">{{ order.createTime }}</text>
				<!-- 订单状态文字 -->
				<text>{{orderStateList[order.orderState].text}}</text>
				<!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
				<text v-if="order.orderState >= 4" class="icon-delete">删除</text>
			</view>
			<!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
			<navigator v-for="item in order.skus" :key="item.id" class="goods" :url="`/subpkg/detail/detail?id=${order.id}`" hover-class="none">
				<view class="cover">
					<image mode="aspectFit" :src="item.image"></image>
				</view>
				<view class="meta">
					<view class="name ellipsis">{{item.name}}</view>
					<view class="type">{{item.attrsText}}</view>
				</view>
			</navigator>
			<!-- 支付信息 -->
			<view class="payment">
				<text class="quantity">共{{order.totalNum}}件商品</text>
				<text>实付</text>
				<text class="amount"> <text class="symbol">¥</text>{{order.payMoney}}</text>
			</view>
			<!-- 订单操作按钮 -->
			<view class="action">
				<!-- 待付款状态：显示去支付按钮 -->
				<template v-if="order.orderState == 1">
					<view class="button primary" @click="onOrderPay(order.id)">去支付</view>
				</template>
				<template v-else>
					<!-- <navigator class="button secondary" :url="`/subpkg/create/create?orderId=id`" hover-class="none">再次购买</navigator> -->
					<!-- 待收货状态: 展示确认收货 -->
					<view v-if="order.orderState == 3" class="button primary">确认收货</view>
				</template>
			</view>
		</view>
		<!-- 底部提示文字 -->
		<!-- <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
			{{ true ? '没有更多数据~' : '正在加载...' }}
		</view> -->
	</scroll-view>
</template>

<style lang="scss">
	// 订单列表
	.orders {
		height: 100%;
		
		.card {
			min-height: 100rpx;
			padding: 20rpx;
			margin: 20rpx 20rpx 0;
			border-radius: 10rpx;
			background-color: #fff;
	
			&:last-child {
				padding-bottom: 40rpx;
			}
		}
	
		.status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 15rpx;
	
			.date {
				color: #666;
				flex: 1;
			}
	
			.primary {
				color: #ff9240;
			}
	
			.icon-delete {
				line-height: 1;
				margin-left: 10rpx;
				padding-left: 10rpx;
				border-left: 1rpx solid #e3e3e3;
			}
		}
	
		.goods {
			display: flex;
			margin-bottom: 20rpx;
	
			.cover {
				width: 170rpx;
				height: 170rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				
				image{
					width: 170rpx;
					height: 170rpx;
				}
			}
	
			.quantity {
				position: absolute;
				bottom: 0;
				right: 0;
				line-height: 1;
				padding: 6rpx 4rpx 6rpx 8rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx 0 0 0;
				background-color: rgba(0, 0, 0, 0.6);
			}
	
			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
	
			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}
	
			.type {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}
	
			.more {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #333;
			}
		}
	
		.payment {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 1;
			padding: 20rpx 0;
			text-align: right;
			color: #999;
			font-size: 28rpx;
			border-bottom: 1rpx solid #eee;
	
			.quantity {
				font-size: 24rpx;
				margin-right: 16rpx;
			}
	
			.amount {
				color: #444;
				margin-left: 6rpx;
			}
	
			.symbol {
				font-size: 20rpx;
			}
		}
	
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;
	
			.button {
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}
	
			.secondary {
				color: #27ba9b;
				border-color: #27ba9b;
			}
	
			.primary {
				color: #fff;
				background-color: #27ba9b;
			}
		}
	
		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>